<template>
  <div class="home">
    <div class="base-info">
      <ul>
        <li class="base-item">
          <strong>酒店名称:</strong>
          <TextWithInput :text="state.hotel.name" @save="(val) => {handleSave('name', val)}" />
        </li>
        <li class="base-item">
          <strong>酒店热线:</strong>
          <TextWithInput :text="state.hotel.phone" @save="(val) => {handleSave('phone', val)}" />
        </li>
        <li class="base-item">
          <strong>酒店地址:</strong>
          <TextWithInput :text="state.hotel.address" @save="(val) => {handleSave('address', val)}" />
        </li>
        <li class="base-item">
          <strong>酒店介绍:</strong>
          <TextWithInput :text="state.hotel.description" @save="(val) => {handleSave('description', val)}" />
        </li>
      </ul>
      <div class="submit">
        <a-button type="primary" block @click="submit">保存编辑</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, reactive } from 'vue'
import { useStore } from 'vuex'
import TextWithInput from "../components/TextWithInput.vue";
import { getInstance } from "../utils/request";
import { message } from 'ant-design-vue';
export default {
    name: "Home",
    components: {
      TextWithInput
    },
    setup(){
        const store = useStore();
        const state = reactive({
          hotel: store.state.hotel.hotel
        })
        const handleSave = (key, value) => {
          state.hotel[key] = value;
        }
        const submit = async () => {
          const token = localStorage.getItem("token");
          const id = state.hotel.id;
          let res = await getInstance(token).patch(`/hotel/${id}`, state.hotel);
          if(res.code === 0){
            message.success("保存更新成功！")
          }else{
            message.error("保存更新失败!请重新尝试.")
          }
        }
        return {
          state,
          handleSave,
          submit
        }
    }
}
</script>

<style lang="scss">
@import "../assets/styles/pages/home.scss";
</style>